<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>发起请求</button>
    <button>取消请求</button>
    <script>
        let btns = document.querySelectorAll('button');

        let x;
        btns[0].onclick = function () {
            // 1. 创建XHR对象的构造函数 (重点)
            x = new XMLHttpRequest()
            // 2. 初始化发起一个请求（重点）
            x.open('post', 'http://localhost/jsonServer')
            // x.setRequestHeader('a','123');
            // 3. 设置请求头（重点）- (可选)
            x.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
            // 4. 发送请求（重点）
            x.send('name=laowang');
            // 5. 绑定readyState改变的监听（重点）
            x.onreadystatechange = function () {
                // 6. 标识请求状态的只读属性（重点）
                if (x.readyState === 4) {
                    // 7. status: 响应状态码值, 比如200, 404（重点）
                    if (x.status === 200) {
                        // 8. response: 响应体数据, 类型取决于responseType的指定（重点）
                        console.log(x.response);

                        // 9. 获取响应头信息
                        let str = x.getAllResponseHeaders();

                        let str2 = x.getResponseHeader('content-length');

                        console.log(str2);
                        console.log(str);
                    }
                }
            }
            // 9. 设置响应体类型（json）
            x.responseType = 'json';
            // 10. 设置超时时间（单位：毫秒）
            x.timeout = 4000;
            // 11. 绑定超时监听函数
            x.ontimeout = function () {
                console.log("请求超时了");
            }
            // 12. 当请求错误时监听函数 
            x.onerror = function () {
                console.log("网络问题");
            }
            // 13. 当请求被取消时触发
            x.onabort = function(){
                console.log("我不知为何被取消了");
            }
        }

        btns[1].onclick = function(){
            // 主动停止取消请求
            x.abort();
        }

    </script>
</body>

</html>